<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题库练习 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
    <style>
        .practice-header {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        
        .practice-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .practice-modes {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        
        .mode-card {
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            box-shadow: var(--shadow-sm);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .mode-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--spacing-sm);
            color: var(--primary-color);
            font-size: 24px;
        }
        
        .mode-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .mode-desc {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .category-tabs {
            display: flex;
            overflow-x: auto;
            background-color: var(--bg-white);
            padding: 0 var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: var(--spacing-md) var(--spacing-sm);
            white-space: nowrap;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .category-tab.active {
            color: var(--primary-color);
            font-weight: 600;
            position: relative;
        }
        
        .category-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 8px;
            right: 8px;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        
        .question-list {
            padding: 0 var(--spacing-md);
        }
        
        .question-item {
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-sm);
        }
        
        .question-type {
            background-color: var(--primary-light);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .question-difficulty {
            display: flex;
        }
        
        .difficulty-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--border-color);
            margin-left: 2px;
        }
        
        .difficulty-dot.active {
            background-color: var(--warning-color);
        }
        
        .question-content {
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .question-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .question-meta {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .question-actions {
            display: flex;
            gap: var(--spacing-sm);
        }
        
        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 16px;
        }
        
        .action-btn.favorite {
            color: var(--warning-color);
        }
        
        .error-book {
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            margin: 0 var(--spacing-md) var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }
        
        .error-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-md);
        }
        
        .error-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .error-count {
            background-color: var(--danger-color);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .error-item {
            display: flex;
            align-items: center;
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .error-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: var(--danger-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--spacing-sm);
            color: var(--danger-color);
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .error-question {
            flex: 1;
            font-size: 14px;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .mock-exam-card {
            background-color: var(--primary-light);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            margin: 0 var(--spacing-md) var(--spacing-md);
            position: relative;
            overflow: hidden;
        }
        
        .mock-exam-content {
            position: relative;
            z-index: 1;
        }
        
        .mock-exam-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: var(--spacing-xs);
        }
        
        .mock-exam-desc {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-md);
        }
        
        .mock-exam-btn {
            background-color: var(--primary-color);
            color: white;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            display: inline-block;
        }
        
        .mock-exam-bg {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 120px;
            height: 120px;
            opacity: 0.2;
        }
        
        .tab-container {
            display: flex;
            background-color: var(--bg-white);
            margin-bottom: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
        }
        
        .tab {
            flex: 1;
            padding: var(--spacing-md);
            text-align: center;
            font-size: 16px;
            color: var(--text-secondary);
            position: relative;
        }
        
        .tab.active {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            right: 25%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <a href="training-simple.html" class="back-btn">
                    <i class="icon-back"></i>
                </a>
                <h1>题库练习</h1>
                <div class="header-actions">
                    <a href="#" class="icon-search"></a>
                </div>
            </div>
        </header>

        <!-- 练习统计 -->
        <div class="practice-header">
            <div class="practice-stats">
                <div class="stat-item">
                    <div class="stat-value">128</div>
                    <div class="stat-label">已做题目</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">85%</div>
                    <div class="stat-label">正确率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">12</div>
                    <div class="stat-label">错题数</div>
                </div>
            </div>
        </div>

        <!-- 标签页切换 -->
        <div class="tab-container">
            <div class="tab active" data-tab="practice">练习模式</div>
            <div class="tab" data-tab="errorbook">错题本</div>
        </div>

        <!-- 练习模式标签页 -->
        <div class="tab-content active" id="practice-tab">
            <!-- 练习模式 -->
            <div class="practice-modes">
                <div class="mode-card">
                    <div class="mode-icon">
                        <i class="icon-random"></i>
                    </div>
                    <div class="mode-title">随机练习</div>
                    <div class="mode-desc">随机抽取题目练习</div>
                </div>
                <div class="mode-card">
                    <div class="mode-icon">
                        <i class="icon-chapter"></i>
                    </div>
                    <div class="mode-title">章节练习</div>
                    <div class="mode-desc">按章节分类练习</div>
                </div>
                <div class="mode-card">
                    <div class="mode-icon">
                        <i class="icon-type"></i>
                    </div>
                    <div class="mode-title">题型练习</div>
                    <div class="mode-desc">按题型分类练习</div>
                </div>
                <div class="mode-card">
                    <div class="mode-icon">
                        <i class="icon-favorite"></i>
                    </div>
                    <div class="mode-title">收藏题目</div>
                    <div class="mode-desc">练习已收藏题目</div>
                </div>
            </div>

            <!-- 模拟考试卡片 -->
            <div class="mock-exam-card">
                <div class="mock-exam-content">
                    <h3 class="mock-exam-title">模拟考试</h3>
                    <p class="mock-exam-desc">模拟真实考试环境，检验学习成果</p>
                    <a href="mock-exam.html" class="mock-exam-btn">开始考试</a>
                </div>
                <img src="images/icons/exam.png" alt="考试" class="mock-exam-bg">
            </div>

            <!-- 题目分类 -->
            <div class="category-tabs">
                <div class="category-tab active">全部</div>
                <div class="category-tab">基础护理</div>
                <div class="category-tab">专科护理</div>
                <div class="category-tab">急救技能</div>
                <div class="category-tab">心理关怀</div>
                <div class="category-tab">营养膳食</div>
            </div>

            <!-- 题目列表 -->
            <div class="question-list">
                <div class="question-item">
                    <div class="question-header">
                        <div class="question-type">单选题</div>
                        <div class="question-difficulty">
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot"></div>
                            <div class="difficulty-dot"></div>
                        </div>
                    </div>
                    <div class="question-content">
                        老年人血压测量时，以下哪种做法是正确的？
                    </div>
                    <div class="question-footer">
                        <div class="question-meta">基础护理 · 2023-05-20</div>
                        <div class="question-actions">
                            <div class="action-btn">
                                <i class="icon-favorite-o"></i>
                            </div>
                            <div class="action-btn">
                                <i class="icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="question-item">
                    <div class="question-header">
                        <div class="question-type">多选题</div>
                        <div class="question-difficulty">
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot"></div>
                        </div>
                    </div>
                    <div class="question-content">
                        以下哪些是老年人常见的心理问题？
                    </div>
                    <div class="question-footer">
                        <div class="question-meta">心理关怀 · 2023-05-18</div>
                        <div class="question-actions">
                            <div class="action-btn favorite">
                                <i class="icon-favorite"></i>
                            </div>
                            <div class="action-btn">
                                <i class="icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="question-item">
                    <div class="question-header">
                        <div class="question-type">判断题</div>
                        <div class="question-difficulty">
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot active"></div>
                        </div>
                    </div>
                    <div class="question-content">
                        糖尿病患者可以适量食用含糖量高的水果。
                    </div>
                    <div class="question-footer">
                        <div class="question-meta">专科护理 · 2023-05-15</div>
                        <div class="question-actions">
                            <div class="action-btn">
                                <i class="icon-favorite-o"></i>
                            </div>
                            <div class="action-btn">
                                <i class="icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="question-item">
                    <div class="question-header">
                        <div class="question-type">案例分析</div>
                        <div class="question-difficulty">
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot active"></div>
                            <div class="difficulty-dot active"></div>
                        </div>
                    </div>
                    <div class="question-content">
                        78岁老人，中风后遗症，右侧肢体活动受限，如何进行日常护理？
                    </div>
                    <div class="question-footer">
                        <div class="question-meta">专科护理 · 2023-05-12</div>
                        <div class="question-actions">
                            <div class="action-btn">
                                <i class="icon-favorite-o"></i>
                            </div>
                            <div class="action-btn">
                                <i class="icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 错题本标签页 -->
        <div class="tab-content" id="errorbook-tab">
            <div class="error-book">
                <div class="error-header">
                    <div class="error-title">我的错题</div>
                    <div class="error-count">12题</div>
                </div>
                <div class="error-list">
                    <div class="error-item">
                        <div class="error-icon">
                            <i class="icon-wrong"></i>
                        </div>
                        <div class="error-question">老年人血压测量时，以下哪种做法是正确的？</div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon">
                            <i class="icon-wrong"></i>
                        </div>
                        <div class="error-question">糖尿病患者可以适量食用含糖量高的水果。</div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon">
                            <i class="icon-wrong"></i>
                        </div>
                        <div class="error-question">以下哪些是老年人常见的心理问题？</div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon">
                            <i class="icon-wrong"></i>
                        </div>
                        <div class="error-question">老年人跌倒的主要危险因素有哪些？</div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon">
                            <i class="icon-wrong"></i>
                        </div>
                        <div class="error-question">心肺复苏的正确按压频率是多少？</div>
                    </div>
                </div>
            </div>

            <div class="mock-exam-card">
                <div class="mock-exam-content">
                    <h3 class="mock-exam-title">错题练习</h3>
                    <p class="mock-exam-desc">针对错题进行专项练习，查漏补缺</p>
                    <a href="error-practice.html" class="mock-exam-btn">开始练习</a>
                </div>
                <img src="images/icons/practice.png" alt="练习" class="mock-exam-bg">
            </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <i class="nav-icon icon-home"></i>
                <span>首页</span>
            </a>
            <a href="schedule.html" class="nav-item">
                <i class="nav-icon icon-schedule"></i>
                <span>排班</span>
            </a>
            <a href="training-simple.html" class="nav-item active">
                <i class="nav-icon icon-training"></i>
                <span>培训</span>
            </a>
            <a href="profile.html" class="nav-item">
                <i class="nav-icon icon-profile"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 标签页切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除当前激活状态
                document.querySelector('.tab.active').classList.remove('active');
                document.querySelector('.tab-content.active').classList.remove('active');
                
                // 设置新的激活状态
                this.classList.add('active');
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId + '-tab').classList.add('active');
            });
        });
        
        // 分类标签切换
        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelector('.category-tab.active').classList.remove('active');
                this.classList.add('active');
                // 这里可以添加加载对应分类题目的逻辑
            });
        });
        
        // 题目点击跳转
        document.querySelectorAll('.question-item').forEach(item => {
            item.addEventListener('click', function() {
                window.location.href = 'question-detail.html';
            });
        });
        
        // 收藏按钮点击
        document.querySelectorAll('.action-btn').forEach(btn => {
            if (btn.querySelector('.icon-favorite-o') || btn.querySelector('.icon-favorite')) {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    // 切换收藏状态
                    if (this.querySelector('.icon-favorite-o')) {
                        this.innerHTML = '<i class="icon-favorite"></i>';
                        this.classList.add('favorite');
                    } else {
                        this.innerHTML = '<i class="icon-favorite-o"></i>';
                        this.classList.remove('favorite');
                    }
                });
            }
        });
        
        // 练习模式点击
        document.querySelectorAll('.mode-card').forEach(card => {
            card.addEventListener('click', function() {
                // 根据不同的练习模式跳转到不同的页面
                const modeTitle = this.querySelector('.mode-title').textContent;
                if (modeTitle === '随机练习') {
                    window.location.href = 'random-practice.html';
                } else if (modeTitle === '章节练习') {
                    window.location.href = 'chapter-practice.html';
                } else if (modeTitle === '题型练习') {
                    window.location.href = 'type-practice.html';
                } else if (modeTitle === '收藏题目') {
                    window.location.href = 'favorite-practice.html';
                }
            });
        });
        
        // 错题点击
        document.querySelectorAll('.error-item').forEach(item => {
            item.addEventListener('click', function() {
                window.location.href = 'question-detail.html';
            });
        });
    </script>
</body>
</html> 